<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <!-- <i class="hamburger" :class="{'is-active':isActive}" /> -->
    <svg
      :class="{'is-active':isActive}"
      class="hamburger normal"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
    <svg
      :class="{'is-active':isActive}"
      class="hamburger light"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style="display: none;"
    >
      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9006 1.6114C15.9006 1.06255 15.4557 0.617615 14.9068 0.617615H0.993789C0.444934 0.617615 0 1.06255 0 1.6114C0 2.16026 0.444934 2.60519 0.993789 2.60519H14.9068C15.4557 2.60519 15.9006 2.16026 15.9006 1.6114ZM14.4099 4.876C14.9588 4.876 15.4037 5.32093 15.4037 5.86979C15.4037 6.41864 14.9588 6.86358 14.4099 6.86358H7.45342C6.90456 6.86358 6.45963 6.41864 6.45963 5.86979C6.45963 5.32093 6.90456 4.876 7.45342 4.876H14.4099ZM15.4037 10.1282C15.4037 9.57932 14.9588 9.13439 14.4099 9.13439H7.45342C6.90456 9.13439 6.45963 9.57932 6.45963 10.1282C6.45963 10.677 6.90456 11.122 7.45342 11.122H14.4099C14.9588 11.122 15.4037 10.677 15.4037 10.1282ZM0.993789 15.3823H14.9068C15.2619 15.3823 15.59 15.1929 15.7675 14.8854C15.945 14.578 15.945 14.1991 15.7675 13.8917C15.59 13.5842 15.2619 13.3948 14.9068 13.3948H0.993789C0.444934 13.3948 0 13.8397 0 14.3885C0 14.9374 0.444934 15.3823 0.993789 15.3823Z" fill="#434EB8" />
      <path d="M0.401631 8.31479C0.197315 8.15464 0.197315 7.84531 0.40163 7.68516L3.82812 4.99934C4.09064 4.79357 4.47488 4.9806 4.47488 5.31416V10.6858C4.47488 11.0194 4.09064 11.2064 3.82812 11.0006L0.401631 8.31479Z" fill="#FFCB36" />
    </svg>
  </div>

</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

.hamburger.is-active {
  transform: rotate(0deg);
}
</style>
